<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="6" v-for="(card, index) in statCards" :key="index">
        <el-card shadow="hover" class="stat-card" :class="`card-${card.type}`">
          <div class="card-icon">
            <i :class="card.icon"></i>
          </div>
          <div class="card-content">
            <div class="card-value">{{ card.value }}</div>
            <div class="card-title">{{ card.title }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <!-- 订单统计图表 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header">
            <span>订单统计（近7天）</span>
          </div>
          <div class="chart-placeholder">
            <i class="el-icon-data-line"></i>
            <p>订单数据图表</p>
          </div>
        </el-card>
      </el-col>

      <!-- 销售额统计图表 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header">
            <span>销售额统计（近7天）</span>
          </div>
          <div class="chart-placeholder">
            <i class="el-icon-data-analysis"></i>
            <p>销售额数据图表</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="table-row">
      <!-- 最新订单 -->
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header">
            <span>最新订单</span>
          </div>
          <el-table :data="recentOrders" style="width: 100%" v-loading="loading">
            <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column>
            <el-table-column prop="restaurantName" label="餐厅"></el-table-column>
            <el-table-column prop="receiverName" label="收货人" width="120"></el-table-column>
            <el-table-column prop="payAmount" label="金额" width="120">
              <template slot-scope="scope">
                ¥{{ scope.row.payAmount }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template slot-scope="scope">
                <el-tag :type="getStatusType(scope.row.status)">
                  {{ getStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="下单时间" width="180">
              <template slot-scope="scope">
                {{ formatDate(scope.row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="viewOrderDetail(scope.row.id)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      loading: false,
      statCards: [
        {
          title: '今日订单',
          value: 128,
          icon: 'el-icon-s-order',
          type: 'primary'
        },
        {
          title: '今日销售额',
          value: '¥12,580',
          icon: 'el-icon-money',
          type: 'success'
        },
        {
          title: '新增用户',
          value: 58,
          icon: 'el-icon-user',
          type: 'warning'
        },
        {
          title: '餐厅数量',
          value: 32,
          icon: 'el-icon-s-shop',
          type: 'danger'
        }
      ],
      recentOrders: []
    }
  },
  created() {
    this.fetchRecentOrders()
  },
  methods: {
    fetchRecentOrders() {
      this.loading = true
      this.$http.get('/admin/order/list', {
        params: {
          page: 1,
          size: 10
        }
      })
        .then(response => {
          const { data } = response.data
          this.recentOrders = data.records
        })
        .catch(error => {
          this.$message.error('获取最新订单失败')
          console.error('获取最新订单失败', error)
        })
        .finally(() => {
          this.loading = false
        })
    },
    getStatusText(status) {
      const statusMap = {
        0: '待支付',
        1: '已支付',
        2: '配送中',
        3: '已完成',
        4: '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    getStatusType(status) {
      const typeMap = {
        0: 'warning',
        1: 'primary',
        2: 'success',
        3: 'success',
        4: 'info'
      }
      return typeMap[status] || 'info'
    },
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    },
    viewOrderDetail(orderId) {
      this.$router.push(`/admin/order?id=${orderId}`)
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.stat-card {
  height: 100px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.card-primary {
  border-left: 4px solid #409EFF;
}

.card-success {
  border-left: 4px solid #67C23A;
}

.card-warning {
  border-left: 4px solid #E6A23C;
}

.card-danger {
  border-left: 4px solid #F56C6C;
}

.card-icon {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}

.card-primary .card-icon {
  color: #409EFF;
}

.card-success .card-icon {
  color: #67C23A;
}

.card-warning .card-icon {
  color: #E6A23C;
}

.card-danger .card-icon {
  color: #F56C6C;
}

.card-content {
  flex: 1;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-title {
  font-size: 14px;
  color: #909399;
}

.chart-row,
.table-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 350px;
}

.chart-placeholder {
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #909399;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.chart-placeholder i {
  font-size: 48px;
  margin-bottom: 10px;
}
</style>
